<template>
    <div class="coupon">
        <div class="tab-item flex" v-for="ele in couponList" :key="ele.id" v-if="couponList.length > 0"
            @click="jumpTo('/packageA/pages/addCoupon/index?id=' + ele.id)">
            <div class="left">
                <div class="flex-a"><span>{{ ele.name }}</span>
                </div>
                <div v-if="ele.endDate">{{ ele.endDate }}到期</div>
            </div>
            <div class="right">
                <div class="money"><text>￥</text>{{ ele.lessPrice }}</div>
                <div class="limit">满{{ ele.fullKey }}可用</div>
            </div>
        </div>
        <nut-empty v-else description="无数据"></nut-empty>
        <nut-button class="addBtn" type="info" block
            @click="jumpTo('/packageA/pages/addCoupon/index')">新增优惠券</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom, useShareAppMessage } from '@tarojs/taro';
import { } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getCouponlist } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            // if (res.from === 'button') {
            //     // 来自页面内转发按钮
            //     //console.log(res.target)
            // }
            // return {
            //     // title: data.detail.goodsName + '',
            //     path: '/pages/index/index?couponId=' + data.couponId + '&userId=' + user.userId,
            // }
        })
        const data = reactive({
            couponList: [],
            page: 1,
            limit: 10,
            status: 0,
            couponId: 0,
        });
        onMounted(() => {
            getCouponlists()
        });
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.page++
            getCouponlists()
        })
        const getCouponlists = () => {
            getCouponlist().then(res => {
                if (res.code == 200) {
                    data.couponList = res.rows
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({
                url: path
            })
        }
        return {
            ...toRefs(data), getCouponlists, jumpTo
        }
    }
};
</script>


<style lang="scss">
.coupon {
    padding: 20rpx 0 150rpx;

    .tab-item {
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        width: 94%;
        margin: 0 auto 20rpx;

        .left {
            width: 75%;
            padding: 30rpx 0 30rpx 30rpx;
            white-space: nowrap;

            div:first-child {
                font-size: 26rpx;
                margin-bottom: 10rpx;
            }

            div:last-child {
                font-size: 26rpx;
                color: #999;
            }
        }

        .right.show {
            padding: 30rpx 0 0 0;
        }

        .right {
            width: 25%;
            border-left: 1rpx dashed #E9E9E9;
            text-align: center;
            padding: 10rpx 0 0 0;
            // padding: 30rpx 0 0 0;

            .money {
                font-size: 40rpx;
                color: #FFAA0D;

                text {
                    font-size: 26rpx;
                }
            }

            .limit {
                color: #999;
                font-size: 22rpx;
                margin-bottom: 5rpx;
            }

            .nut-button {
                padding: 0rpx 10rpx;
                font-size: 22rpx;
                height: 40rpx;
            }
        }
    }

    .addBtn {
        width: 96%;
        position: fixed;
        bottom: 20rpx;
        left: 2%;
        padding: 20rpx;
    }
}
</style>